<template>
	<view class="container">
		<!-- 头部(包含标题、发布需求) -->
		<view class="container-header">
			<!-- 标题 -->
			<view class="container-header-title">iDOCK</view>
			<!-- 发布需求 -->
			  <view class="publish-demand-container">
			  	<!-- 发布需求标题 -->
			  	<view class="publish-demand-container-header">
			  		<text class="title">发布需求</text>
			  		<span class="history-demand" @click="$goPage('/demand')">历史需求<u-icon name="arrow-right"></u-icon></span>
			  	</view>
			  	<!-- 搜索框 -->
			  	<u-input placeholder="发布你的需求, 我们可以为你解决" 
			  	:custom-style="{'height': '96rpx','margin':'8rpx 0','padding': '0 24rpx', 'background': '#FEFEFE','border-radius': '12rpx'}"
			  	placeholder-style="font-family:PingFang SC-Regular, PingFang SC,line-height:44rpx"> </u-input>
			  	<!-- 垂直展示需求功能列表 -->
			  		<view class="ability-item">
			  			<i class="icon icon-video"></i>
			  			<text class="text">船舶维修保养、修船答疑解惑</text>
			  		</view>
			  		<view class="ability-item">
			  			<i class="icon icon-video"></i>
			  			<text class="text">船舶设备供应、造船经济</text>
			  		</view>
			  		<view class="ability-item">
			  			<i class="icon icon-video"></i>
			  			<text class="text">工作生活帮助</text>
			  		</view>
			  	  <!-- 水平展示需求功能列表 -->
			  		<view class="ability-vertical">
			  			<view class="ability-vertical-item">
			  				<i class="icon icon-video"></i>
			  				<text class="text">发布需求</text>
			  			</view>
			  			<u-icon name="arrow-right" color="rgba(71, 107, 238, 0.5)"></u-icon>
			  			<view class="ability-vertical-item">
			  				<i class="icon icon-video"></i>
			  				<text class="text">需求承接</text>
			  			</view>
			  			<u-icon name="arrow-right" color="rgba(71, 107, 238, 0.5)"></u-icon>
			  			<view class="ability-vertical-item">
			  				<i class="icon icon-video"></i>
			  				<text class="text">解决/转修理</text>
			  			</view>
			  		</view>
			  		<!-- 收缩按钮 -->
			  		<view class="extend-btn-container">
			  			<view class="extend-btn">
			  				<u-icon name="arrow-up" color="rgba(0, 0, 0, 0.3)"></u-icon>
			  			</view>
			  		</view>
			  </view>	
			  <!-- 需求轮播图 -->
		    <view class="demand-swiper">
			    <kevy-swiper :list="demandSwiperList" :height="158"></kevy-swiper>
		    </view>
		</view> 
	
		<!-- 社区内容展示 -->
		  <view class="topic-container">
			<!-- tabs切换 -->
			  <view class="topic-tabs">
			  	<u-tabs class="tab" :list="topicTablist" :is-scroll="false" 
			  	:current="current" 
			  	@change="changeTab"
			  	bg-color="transparent"></u-tabs>	
			   <view class="publish-post-btn">
			   	<i class="icon icon-video"></i>
			   	<text class="text">发帖</text>
			   </view>
			  </view>	
			  <scroll-view scroll-y style="height: 90vh"
			  @scroll="scrollTopic">
			  	<article-item></article-item>  
			  	<article-item></article-item> 
			  	<article-item></article-item> 
			  	<article-item></article-item> 
			  	<article-item></article-item> 
			  	<!-- 占位元素 -->
			  	<view style="height: 100rpx"></view>
			  </scroll-view>
		   </view>
	</view>
</template>
<script>
import { defineComponent,reactive, toRefs} from "vue"
import KevySwiper from '@/components/kevy-swiper.vue'
import ArticleItem from '@/components/article-item/index.vue'
export default defineComponent({
	components: {
		ArticleItem,
		KevySwiper
	},
	setup(props) {
		const data = reactive({
			topicTablist: [
				{
					name: '最新'
				},
				{
					name: '热榜'
				},
				{
					name: '学术'
				}
			],
			current: 0,
			isScroll: true,
			demandSwiperList: [
				{
					time: '2023-03-30 22:21',
					tag: '船舶维',
					stat: '未指派',
					content: '需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求'
				},
				{
					time: '2023-03-30 22:21',
					tag: '船舶维',
					stat: '未指派',
					content: '需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求'
				},
				{
					time: '2023-03-30 22:21',
					tag: '船舶维修保养',
					stat: '未指派',
					content: '需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求'
				},
				{
					time: '2023-03-30 22:21',
					tag: '船舶维保养',
					stat: '未指派',
					content: '需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求需求'
				}
			], 
		})
		//切换社区tabs事件
		const changeTab = (index) => {
			data.current = index
		};
		//点击需求轮播板块处理事件
		const swiperClick = () => {
			
		};
		const scrollPage = (e)=> {
			console.log(e)
			if(e.detail.scrollTop > 600) {
				data.isScroll = false
			}
		}
		return {
			...toRefs(data),
			changeTab,
			swiperClick,
			scrollPage
		}
	}
})
</script>
<style lang="scss" scoped>
.container {
	&-header {
		padding: 110rpx 0 32rpx;
		background-image:linear-gradient(to bottom,rgba(71, 107, 238, 0.09),rgba(71, 107, 238, 0)) ;
		&-title {
			height: 56rpx;
			padding: 0 32rpx;
			font-family: Baunk-Regular;
			font-weight: 400;
			font-size: 40.2rpx;
			color: #476BEE;
			line-height: 55rpx;
			letter-spacing: 3px;
			-webkit-text-stroke: 1px #476BEE;
			text-stroke: 1px #476BEE;
			-webkit-background-clip: text;
		}
		.publish-demand-container {
			padding: 24rpx 24rpx 16rpx;
			background-color: rgba(71, 107, 238, 0.1);
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			margin-top: 10rpx;
			margin-left: 32rpx;
			margin-right: 32rpx;
			&-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
			  .title {
					height: 45rpx;
					font-size: 32rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #000000;
					line-height: 38rpx;
					-webkit-background-clip: text;
				}
				.history-demand {
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #686D7A;
					line-height: 28rpx;
					-webkit-background-clip: text;
				}
			}
			.ability-item {
				margin-top: 24rpx;
				.text {
					height: 42rpx;
					margin-left: 12rpx;
					font-size: 30rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;
					line-height: 35rpx;
					-webkit-background-clip: text;
				}
			}
			.ability-vertical {
				display: flex;
				justify-content: space-evenly;
				align-items: center;
				height: 69rpx;
				padding: 0 16rpx;
				margin-top: 27rpx;
				background: rgba(71, 107, 238, 0.1);
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				&-item {
					display: flex;
					align-items: center;
					.icon {
						color: #476BEE;
					}
					.text {
						margin-left: 4rpx;
						color: #476BEE;
					}
				}
			}
			.extend-btn-container {
				display: flex;
				justify-content: center;
				margin-top: 16rpx;
        .extend-btn {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 64rpx;
					height: 24rpx;
					background: rgba(0, 0, 0, 0.05);
					border-radius: 12rpx 12rpx 12rpx 12rpx;
				}
			}
			
		}	
		.demand-swiper {
			margin-top: 16rpx;
		}
	}
	.topic-container {
		.topic-tabs {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 32rpx;
			.tab {
				width: 300rpx !important;
				margin-left: -20rpx;
				background-color: transparent;
			}
			.publish-post-btn {
				display: flex;
				align-items: center;
				height: 56rpx;
				padding: 0 26rpx;
				background-color: #476BEE;
				border-radius: 32rpx 32rpx 32rpx 32rpx;
				.icon {
					color: #FEFEFE;
				}
			  .text {
					height: 39rpx;
					margin-left: 10rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FEFEFE;
					line-height: 33rpx;
					-webkit-background-clip: text;
				}
			}
		}
	}
}
</style>
